import React from 'react';
import { Dialog } from 'dw-mx-extend';
import { Button, Space } from 'dw-mx';
import Type1Child from './Type1Child';
import { string } from 'prop-types';
import path from 'path';
import testImg from './123.jpg';
import './style';

export default function Type1() {
    const dialogRef = React.useRef<Dialog>();
    let formData = { id: '', password: '' };
    const openDialog1 = async () => {
        const formData = await dialogRef.current.openDialog(Type1Child, {
            title: 'type1child',
            width: '40%',
            props: {},
        });
        await alert(`id:${formData.id}\npassword:${formData.password}`);
    };
    const openDialog2 = async () => {
        formData = await dialogRef.current.openDialog(Type1Child, {
            title: 'type1child',
            width: '50%',
            height: '25%',
            props: {},
        });
        await alert(`id:${formData.id}\npassword:${formData.password}`);
    };
    return (
        <>
            宽度控制：
            <ul>
                <li>
                    Dialog 的宽度是通过控制openDialog方法传入的 width 属性进行配置
                    <ul>
                        <li>支持固定像素</li>
                        <li>支持百分比</li>
                    </ul>
                </li>
            </ul>
            高度控制：
            <ul>
                <li>Dialog 的高度同样可不配置，自适应内容（适用于绝大多数场景）</li>
                <li>
                    如果想指定 Dialog 的高度：
                    <ul>
                        <li>在 openDialog 传入的第二个对象参数里添加高度，同样支持固定像素和百分比</li>
                    </ul>
                </li>
            </ul>
            组件传参：
            <ul>
                <li>
                    Dialog是通过控制openDialog()方法和closeDialog()方法来进行传参的：
                    <ul>
                        <li>父组件给子组件传参是通过openDialog(子组件,{`title:'child',width:'400',props:{}`})中的props来将参数传递给子组件，在子组件中直接通过props.*就可以获取到对应的数据。</li>
                        <li>子组件给父组件传参是通过closeDialog(想要传递的数据)进行传参的，父组件异步获取openDialog()的返回值就可以了。</li>
                    </ul>
                </li>
            </ul>
            <Space>
                <Button onClick={openDialog1}>宽度指定为40%，高度自适应</Button>
                <Button onClick={openDialog2}>宽度指定为50%，高度为25%</Button>
            </Space>
            <Dialog ref={dialogRef}></Dialog>
        </>
    );
}

